<template>
	<div class="customerList">
		<div class="lz-header">
			<div
				style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;flex-wrap: wrap;">
				<div>
					<el-button type="primary" icon="el-icon-circle-plus-outline" :size="size" @click="customerAdd()">添加
					</el-button>
					<el-button type="primary" icon="el-icon-printer" :size="size" @click="exportExcel()">导出</el-button>
					<el-button type="primary" icon="el-icon-search" :size="size" @click="updateCustomerCheckStatusByIds()">审批</el-button>
					<!-- <el-button type="primary" icon="el-icon-delete" :size="size" @click="deleteBatch()">删除</el-button> -->
				</div>
				<div style="display: flex;flex-wrap: wrap;">
					<lz-row-col name="客户编号" :label="computeInputBox('customerNo','label')">
						<el-input v-model="seach.customerNo" placeholder="请输入" :size="size"
							@keyup.enter.native="submitFormSeach"></el-input>
					</lz-row-col>

					<lz-row-col>
						<div style="display: flex;">
							<el-button type="primary" icon="el-icon-search" :size="size" style="margin:0 10px;"
								@click="submitFormSeach()">搜索</el-button>
							<el-popover placement="bottom" trigger="click" width="300" v-model="seach.visible">
								<div style="display: flex;flex-wrap: wrap;">
									<lz-row-col name="客户简称" :label="computeInputBox('customerCname','label')">
										<el-input v-model="seach.customerCname" placeholder="请输入" :size="size"
											@keyup.enter.native="submitFormSeach"></el-input>
									</lz-row-col>
									<lz-row-col name="公司性质" :label="computeInputBox('companyKind','label')">
										<el-input v-model="seach.companyKind" placeholder="请输入" :size="size"
											@keyup.enter.native="submitFormSeach"></el-input>
									</lz-row-col>
								</div>
								<div style="display: flex;margin-top: 10px;justify-content: center;">
									<el-button :size="size" type="primary" icon="el-icon-search"
										@click="submitFormSeach()">搜索</el-button>
									<el-button :size="size" icon="el-icon-refresh-right" @click="resetForm()">重置
									</el-button>
									<el-button :size="size" type="warning" @click="seach.visible=false"
										icon="el-icon-circle-close">取消</el-button>
								</div>
								<el-button type="primary" slot="reference" icon="el-icon-more" :size="size"></el-button>
							</el-popover>
						</div>
					</lz-row-col>
				</div>
			</div>
		</div>
		<div class="r-c-center">
			<el-table ref="multipleTable" :data="table.list" border :size="size" @selection-change="handleSelectionChange" :header-cell-style="headerCellStyle" :cell-class-name="addClass">
				<el-table-column type="selection" width="55" ></el-table-column>
				<el-table-column prop="isCheck" label="审批状态" width="100"  sortable>
					<template slot-scope="scope">
						{{ computerTagType(scope.row.isCheck,'txt') }}
					</template>
				</el-table-column>
				<el-table-column prop="customerNo" name="客户编号" :label="computeInputBox('customerNo','label')"  width="160"  sortable></el-table-column>
				<el-table-column prop="customerCname" name="客户简称" :label="computeInputBox('customerCname','label')" width="100"  sortable></el-table-column>
				<el-table-column prop="customerEname" name="客户全称" :label="computeInputBox('customerEname','label')" show-overflow-tooltip  width="100" sortable>
				</el-table-column>
				<el-table-column prop="manageRange" name="经验范围" :label="computeInputBox('manageRange','label')" show-overflow-tooltip  width="100" sortable>
				</el-table-column>
				<el-table-column prop="address" name="客户地址" :label="computeInputBox('address','label')" show-overflow-tooltip  sortable width="120"></el-table-column>
				<el-table-column prop="companyKind" name="公司性质" :label="computeInputBox('companyKind','label')" show-overflow-tooltip  sortable width="120">
					<template slot-scope="scope">
						{{ computerCompanyKind(scope.row.companyKind) }}
					</template>
				</el-table-column>
				<el-table-column prop="companyTax" name="公司税码" :label="computeInputBox('companyTax','label')" show-overflow-tooltip  width="120" sortable>
				</el-table-column>
				<el-table-column prop="registerMoney" name="注册资金" :label="computeInputBox('registerMoney','label')" show-overflow-tooltip  sortable width="120">
				</el-table-column>
				<el-table-column prop="firstContactName" name="第一联系人" :label="computeInputBox('firstContactName','label')" show-overflow-tooltip  width="120" sortable>
				</el-table-column>
				<el-table-column prop="firstPhone" name="第一联系电话" :label="computeInputBox('firstPhone','label')" show-overflow-tooltip  width="120" sortable>
				</el-table-column>
				<el-table-column prop="email" name="邮箱Email" :label="computeInputBox('email','label')" show-overflow-tooltip  sortable width="120"></el-table-column>
				<el-table-column prop="supplierNo" name="供应商编号" :label="computeInputBox('supplierNo','label')" show-overflow-tooltip  width="180" sortable></el-table-column>
				<el-table-column prop="supplierCname" label="供应商简称" show-overflow-tooltip  width="120" sortable></el-table-column>
				<el-table-column prop="shippingAddress" name="送货地址" :label="computeInputBox('shippingAddress','label')" show-overflow-tooltip  sortable width="120">
				</el-table-column>
				<el-table-column prop="quotationNoFormat" name="报价单格式" :label="computeInputBox('quotationNoFormat','label')" show-overflow-tooltip 
					width="120" sortable></el-table-column>
				<el-table-column prop="quotationBeginNo" name="报价单号" :label="computeInputBox('quotationBeginNo','label')" show-overflow-tooltip  sortable width="120">
				</el-table-column>
				<el-table-column prop="saleNoFormat" name="出货单格式" :label="computeInputBox('saleNoFormat','label')" show-overflow-tooltip  sortable width="120">
				</el-table-column>
				<el-table-column prop="saleBusinessBeginNo" name="销售送货单号编号" :label="computeInputBox('saleBusinessBeginNo','label')" show-overflow-tooltip 
					width="160" sortable></el-table-column>
				<el-table-column prop="littleBusinessBeginNo" name="零星送货单号编号" :label="computeInputBox('littleBusinessBeginNo','label')" show-overflow-tooltip 
					width="160" sortable></el-table-column>
				<el-table-column prop="invoiceCompanyName" name="开票公司" :label="computeInputBox('invoiceCompany','label')" show-overflow-tooltip  sortable width="120">
				</el-table-column>
				<el-table-column prop="accountNo" name="账号号码" :label="computeInputBox('accountNo','label')" show-overflow-tooltip  sortable width="120"></el-table-column>
				<el-table-column prop="bankName" name="开户行" :label="computeInputBox('bankName','label')" show-overflow-tooltip  sortable width="120"></el-table-column>
				<el-table-column prop="note" name="备注" :label="computeInputBox('note','label')" show-overflow-tooltip  sortable></el-table-column>
				<el-table-column prop="settleName" name="结算类型编号" :label="computeInputBox('settleNo','label')" show-overflow-tooltip  width="120" sortable></el-table-column>
				<el-table-column prop="payName" name="付款类型编号" :label="computeInputBox('paymentNo','label')" show-overflow-tooltip  width="120" sortable></el-table-column>
				<el-table-column prop="coin" name="币别" :label="computeInputBox('coin','label')" show-overflow-tooltip  sortable></el-table-column>
				<el-table-column prop="taxName" name="税率" :label="computeInputBox('taxCode','label')" show-overflow-tooltip   sortable width="120">
				</el-table-column>
				<el-table-column prop="financeContact" name="财务负责人" :label="computeInputBox('financeContact','label')" show-overflow-tooltip  width="120" sortable>
				</el-table-column>
				<el-table-column prop="financePhone" name="财务联系电话" :label="computeInputBox('financePhone','label')" show-overflow-tooltip  width="120" sortable>
				</el-table-column>
				<el-table-column prop="financeEmail" name="财务邮箱地址" :label="computeInputBox('financeEmail','label')" show-overflow-tooltip  width="120" sortable>
				</el-table-column>
				<el-table-column prop="createdBy" label="创建人" show-overflow-tooltip  sortable width="120"></el-table-column>
				<el-table-column prop="createdDate" label="创建时间" show-overflow-tooltip  sortable width="120"></el-table-column>
				<el-table-column fixed="right" label="操作" width="200" >
					<template slot-scope="scope">
						<el-button @click="seeEmilFn(scope.row,'查看')" type="text" :size="size">查看</el-button>
						<el-button @click="seeEmilFn(scope.row,'修改')" type="text" :size="size"
							:disabled="scope.row.isCheck ==1">修改</el-button>
						<el-popconfirm title="你确定永久删除该数据吗？" confirm-button-type="text"
							@onConfirm="deleteEmilFn(scope.row)">
							<el-button slot="reference" type="text" :size="size" style="margin: 0 5px;" :disabled="scope.row.isCheck ==1">删除</el-button>
						</el-popconfirm>
						<el-popconfirm title="你确定审批吗？" confirm-button-type="text"
							@onConfirm="Approval(scope.row)" v-if="scope.row.isCheck==0">
							<el-button slot="reference" type="text" :size="size" style="margin: 0 5px;" >审批</el-button>
						</el-popconfirm>
						<el-popconfirm title="你确定取消审批吗？" confirm-button-type="text"
							@onConfirm="cancelApproval(scope.row)" v-if="scope.row.isCheck==1">
							<el-button slot="reference" type="text" :size="size" style="margin: 0 5px;">取消审批</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="el-pagination"
				background layout="total, sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"
				:page-size="table.page.pageSize" :total="table.page.total"></el-pagination>
		</div>
		<!-- 添加客户资料或者查看 -->
		<el-dialog v-dialogDrag :title="$route.meta.title+'—'+ dialog.title" center :visible.sync="dialog.show" custom-class="lz-el-dialog"
			width="1100px" top="1vh" :close-on-click-modal="false">
			<addCustomer ref="addCustomer" :type="dialog.title" @success="getCustomerList"></addCustomer>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.show=false" :size="size">取 消</el-button>
				<el-button type="primary" @click="determine" :size="size" style="margin-left: 30px;">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	let that;
	//前端导出excel
	import Blob from '@/Excel/Blob'
	import Export2Excel from '@/Excel/Export2Excel.js'
	import {
		mapGetters
	} from 'vuex';
	import lzRowCol from '@/components/lzRowCol/lzRowCol';
	import addCustomer from './addCustomer';
	export default {
		components: {
			lzRowCol,
			addCustomer,
		},
		name: 'customerList',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		computed: {
			...mapGetters(['size', 'themeBtColor', 'api','headerCellStyle','InputBoxList']),
			computerTagType() {
				return (text, type) => {
					if (text == 0 || !text) {
						return type == 'txt' ? '未审批' : 'warning';
					}
					if (text == '审批中') {
						return type == 'txt' ? '审批中' : '';
					}
					if (text == 1) {
						return type == 'txt' ? '已审批' : 'success';
					}
					if (text == '已驳回') {
						return type == 'txt' ? '已驳回' : 'danger';
					}
				};
			},
			computerCompanyKind(){
				return (text) => {
					if (text == '1') {
						return '一般纳税人';
					}else if (text == '2') {
						return '小规模纳税人';
					}else if (text == '3') {
						return '个体户';
					}else if (text == '4') {
						return '外币公司';
					}else if (text == '5') {
						return '三来一补';
					}
				};
			},
			//计算出当前输入框配置信息
			computeInputBox() {
				return (field, type) => {
					let arr = this.InputBoxList.find(item => item.fieldName == field)
					if (arr && type == 'show') {
						return arr.isVisible == 0 ? true : false //0为显示1为隐藏
					}
					if (arr && type == 'isInput') {
						return arr.isInput == 0 ? field : '' //0为必填1为不必填
					}
					if (arr && type == 'disabled') {
						return arr.isDisplay == 0 ? true : false //0为只读1为可读写
					}
					if (arr && type == 'label') {
						return arr.fieldLabel //标签动态显示名称
					}
					return false
				}
			}
		},
		data() {
			return {
				//表格数据
				table: {
					list: [],
					multiple: [], //多选
					page: {
						pageNo: 1,
						pageSize: 10,
						total: 0
					}
				},
				//搜索
				seach: {
					customerNo: '', //客户编号
					customerCname: '', //客户简称
					companyKind: '' //公司性质
				},
				//移动到
				dialog: {
					title: '',
					show: false
				},
				delOnoff: false, //二次确认是否删除
			};
		},
		mounted() {
			that = this;
			//获取客户资料
			that.getCustomerList()
		},
		methods: {
			//设置表格某个单元格背景颜色
			addClass({row,column,rowIndex,columnIndex}){
			   if(columnIndex === 1){
			      if(row.isCheck == 1){
			          // return 'lz-cell-success';
			      }else{
					   return 'lz-cell-warning';
				  }
			   }
			},
			//Excel导出的方法
			exportExcel() {
				that.GLOBAL.doExport(that.api.GLOBAL_masterData_customer_exportXls, {}).then(res => {
					if (res.status == 200) {
						let blob = res.data;
						const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
						fileReader.readAsDataURL(
						blob); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
						fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
							// 新建个下载的a标签，完成后移除。
							let a = document.createElement('a');
							let _fileName = that.$route.meta.title+'.xls';
							a.download = _fileName;
							a.href = event.target.result;
							document.body.appendChild(a);
							a.click();
							document.body.removeChild(a);
						}
					}
				});
			},
			//审批
			updateCustomerCheckStatusByIds(){
				if (that.table.multiple.length == 0) {
					that.$message.warning('请先勾选项目')
					return
				}
				this.$confirm('确认审批?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let arr = that.table.multiple.map(item => item.id)
					that.GLOBAL.doPost(that.api.GLOBAL_masterData_customer_updateCustomerCheckStatusByIds, {
						ids: arr.join(','),
						isCheck:1
					}).then(res => {
						if (res.code == 200) {
							that.$message.success(res.result)
							that.getCustomerList()
						}
					});
				}).catch(() => {});
			},
			//单个审批
			Approval(row){
				that.GLOBAL.doPost(that.api.GLOBAL_masterData_customer_updateCustomerCheckStatusByIds, {
					ids: row.id,
					isCheck:1
				}).then(res => {
					if (res.code == 200) {
						that.$message.success(res.result)
						that.getCustomerList()
					}
				});
			},
			//取消审批
			cancelApproval(row){
				that.GLOBAL.doPost(that.api.GLOBAL_masterData_customer_updateCustomerCheckStatusByIds, {
					ids: row.id,
					isCheck:0
				}).then(res => {
					if (res.code == 200) {
						that.$message.success(res.result)
						that.getCustomerList()
					}
				});
			},
			//点击添加、编辑弹框确定
			determine() {
				if (that.dialog.title == '添加') {
					that.$refs.addCustomer.determine()
				} else if (that.dialog.title == '修改') {
					that.$refs.addCustomer.customer_edit()
				}
			},
			//查看用户详情或//修改用户详情
			seeEmilFn(row, text) {
				that.GLOBAL.doPost(that.api.GLOBAL_masterData_customer_queryById, {
					id: row.id
				}).then(res => {
					if (res.code == 200) {
						that.dialog.show = true;
						that.dialog.title = text
						that.$nextTick(() => {
							that.$refs.addCustomer.SeeRuleForm(res.result,text)
						})
					}
				});
			},
			//id删除客户信息
			deleteEmilFn(row) {
				that.GLOBAL.doPost(that.api.GLOBAL_masterData_customer_delete, {
					id: row.id
				}).then(res => {
					if (res.code == 200) {
						that.$message.success(res.result)
						that.getCustomerList()
					}
				});
			},
			//批量删除
			deleteBatch() {
				if (that.table.multiple.length == 0) {
					that.$message.warning('请先勾选项目')
					return
				}
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let arr = that.table.multiple.map(item => item.id)
					console.log(arr);
					that.GLOBAL.doPost(that.api.GLOBAL_masterData_customer_deleteBatch, {
						ids: arr.join(',')
					}).then(res => {
						if (res.code == 200) {
							that.$message.success(res.result)
							that.getCustomerList()
						}
					});
				}).catch(() => {});
			},
			//重置搜索表单
			resetForm() {
				that.seach = {
					customerNo: '', //客户编号
					customerCname: '', //客户简称
					companyKind: '' //公司性质
				};
			},
			//搜索
			submitFormSeach() {
				//获取客户资料
				that.getCustomerList();
			},
			//获取客户资料
			getCustomerList() {
				that.dialog.show = false;
				let req = {
					showLoading: true,
					pageNo: that.table.page.pageNo,
					pageSize: that.table.page.pageSize,
					...that.seach,
				};
				that.GLOBAL.doGet(that.api.GLOBAL_masterData_customer_list, req).then(res => {
					if (res.code == 200 && res.result) {
						that.table.page.total = res.result.total;
						that.table.list = res.result.records;
					} else {
						that.table.page.total = 0;
						that.table.list = [];
					}
					// setTimeout(()=>{
					// 	that.$refs.multipleTable.toggleRowSelection(that.table.multiple[0]);
					// },1000)
				});
			},
			
			//表格多选
			handleSelectionChange(val) {
				that.table.multiple = val;
			},
			//添加操作
			customerAdd(text, event) {
				that.dialog.show = true;
				that.dialog.title = '添加'
				that.$nextTick(()=>{
					that.$refs.addCustomer.Reset()
				})
			},
			//切换页
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				that.table.page.pageNo = val;
				//获取客户资料
				that.getCustomerList();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				that.table.page.pageSize = val;
				//获取客户资料
				that.getCustomerList();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.customerList {
		.lz-header {}
		.el-pagination {
			float: right;
			margin: 10px 0;
		}
	}
</style>
